.main-content {
    padding: 20px;
    height: 100%;
}

.main-content,
.main-content div {
    box-sizing: border-box;
}

.content-top {
    height: 55%;
}

.content-bottom {
    height: 45%;
    padding-top: 20px;
    position: relative;
}

.content-top-left {
    height: 100%;
    width: 70%;
    float: left;
}

.content-top-left .left-info {
    height: 20%;
    padding-bottom: 5px;
}

.content-top-left .left-info .info-item {
    float: left;
    height: 100%;
    padding-right: 16px;
    width: 25%;
}

.content-top-left .left-info .info-item:last-child {
    padding-right: 0;
}

.content-top-left .left-info .info-item .item {
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    width: 100%;
}

.content-top-left .left-info .info-item .item .item-icon {
    float: left;
    height: 100%;
    width: 33%;
    border-radius: 4px;
}

.content-top-left .left-info .info-item .item .item-text {
    float: left;
    height: 100%;
    width: 67%;
    background: #ffffff;
    border-bottom-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
}

.content-top-left .left-info .info-item .item .item-text h4 {
    box-sizing: border-box;
    color: #010101;
    font-size: 30px;
    line-height: 30px;
    margin-top: 8%;
    padding-left: 12px;
}

.content-top-left .left-info .info-item .item .item-text h5 {
    color: #010101;
    font-size: 14px;
    line-height: 14px;
    margin-top: 8px;
    box-sizing: border-box;
    padding-left: 12px;
}

.content-top-left .left-chart {
    height: 80%;
    padding-top: 15px;
}

.content-top-left .chart-week,
.content-top-left .chart-month {
    float: left;
    width: 50%;
    height: 100%;
    position: relative;
}

.chart-week {
    border-right: 10px solid #f3f3f3;
}

.chart-month {
    border-left: 10px solid #f3f3f3;
}

.content-top-right {
    height: 100%;
    width: 30%;
    float: left;
    padding-left: 20px;
}

.tooltip-circle {
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
}

.item-title {
    background: #e8e8e8 none repeat scroll 0 0;
    box-sizing: border-box;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding-left: 8px;
    position: absolute;
    width: 100%;
}

.item-content {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    background: #ffffff url(../images/common/loading.gif) no-repeat center;
}

.icon-accept { /**待办理**/
    background: #28ca40 url(../images/main/wait_accept.png) center no-repeat;
}

.icon-close { /**待结案**/
    background: #28ca40 url(../images/main/wait_close.png) center no-repeat;
}

.icon-dispatch { /**待派遣**/
    background: #28ca40 url(../images/main/wait_dispatch.png) center no-repeat;
}

.icon-register { /**待立案**/
    background: #28ca40 url(../images/main/wait_register.png) center no-repeat;
}

.icon-logout { /**申请注销,注销审核**/
    background: #30549B url(../images/main/apply_logout.png) center no-repeat;
}

.icon-postpone { /**申请延期，延期审核**/
    background: #30549B url(../images/main/apply_postpone.png) center no-repeat;
}

.icon-critical-time-limit { /**即将超期**/
    background: #ffbd2e url(../images/main/critical_time_limit.png) center no-repeat;
}

.icon-exceed-time-limit { /**超期**/
    background: #ff6057 url(../images/main/exceed_time_limit.png) center no-repeat;
}